<template>
  <!-- 
    用 keep-alive 包裹 router-view 让动态路由不被频繁的创建销毁
   -->

  <div>
    <div class="footer_wrap">
      <span @click="btn('/find','Find')">发现音乐</span>
      <span @click="ParamsBtn('/my','My')">我的音乐</span>
      <!-- 用query传参数 -->
      <span @click="QueryBtn('/part','Part')">朋友</span>
    </div>
    <div class="top">

      <keep-alive>
        <router-view></router-view>
      </keep-alive>
      
    </div>
  </div>
</template>

<script>
export default {
  methods:{
    // 添加跳转事件 参数1: path路径  参数2: 路由的name属性值
    btn(path,name){
      this.$router.push({
        path,
        name
      })
    },
    QueryBtn(){
      //  注意使用path跳转 就不能用params传参
      this.$router.push({
        name:'Part',
        query:{
          name:"theshy"
        }
      })
    },
    ParamsBtn(){
      this.$router.push({
        name:'My',
        params:{
          song:'爱在西元前'
        }
      })
    }
  }

}
</script>
<style scoped>
.footer_wrap {
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  width: 100%;
  text-align: center;
  background-color: #333;
  color: #ccc;
}
.footer_wrap span {
  flex: 1;
  text-decoration: none;
  padding: 20px 0;
  line-height: 20px;
  background-color: #f5dede;
  color:  rgb(65, 63, 63);
  font-size: 18px;
  border: 1px solid rgb(151, 150, 150);
}
.footer_wrap span:hover {
  background-color:#eeeeee;
}
.top {
  padding-top: 62px;
}

/* 2.激活高亮样式 */
.footer_wrap .router-link-active{
  color: rgb(0, 0, 0);
  background: rgb(249, 243, 243);
}


</style>